<template>
    <div>
        <input type="text" v-model="add_name" placeholder="name"><br>
        <input type="text" v-model="add_type" placeholder="type"><br>
        <input type="number" v-model="add_price" placeholder="price">
        <button @click="adder()">添加</button><br>
        <input type="text" placeholder="按id搜索" v-model="search_id">
        <button @click="searcher()">搜</button>
        <button @click="back()">退出搜索</button>
        <ul>
            <li v-for="(item, index) in get_arr" :key="index">{{ item.id }}--{{ item.name }}<button
                    @click="dele(item.id)">删除</button>
            </li>
        </ul>
    </div>
</template>
<script>
import axios from 'axios';

export default {
    data() {
        return {
            add_name: "",
            add_type: "",
            add_price: "",
            search_id: "",
            get_arr: []
        }
    },
    created() {
    },
    mounted() {
        axios.get("https://liu.zzgoodqc.cn/teas")
            .then(res => {
                // console.log(res.data.data);
                this.get_arr = res.data.data
            })
            .catch(e => {
                console.log(e);
            })
    },
    computed: {
    },
    methods: {
        get() {
            axios.get("https://liu.zzgoodqc.cn/teas")
                .then(res => {
                    // console.log(res.data.data);
                    this.get_arr = res.data.data
                })
                .catch(e => {
                    console.log(e);
                })
        },
        dele(id) {
            axios.delete("https://liu.zzgoodqc.cn/teas/" + id)
                .then(res => {
                    console.log(res.data);
                    this.get()
                })
                .catch(e => {
                    console.log(e);
                })
        },
        adder() {
            axios.post("https://liu.zzgoodqc.cn/teas", {
                name: this.add_name,
                type: this.add_type,
                price: this.add_price
            })
                .then(res => {
                    console.log(res.data);
                    this.get()
                    this.add_name = ""
                    this.add_type = ""
                    this.add_price = ""
                })
                .catch(e => {
                    console.log(e);
                })


            // axios({
            //     url: "https://liu.zzgoodqc.cn/teas",
            //     method: "post",
            //     data: {
            //         name: this.add_name,
            //         type: this.add_type,
            //         price: this.add_price
            //     }
            // })
            //     .then(res => {
            //         console.log(res.data);
            //         this.get()
            //     })
            //     .catch(e => {
            //         console.log(e);
            //     })
        },
        searcher() {
            axios.get("https://liu.zzgoodqc.cn/teas/" + this.search_id)
                .then(res => {
                    this.get_arr = [res.data.data]
                    this.search_id=""
                })
                .catch(e => {
                    console.log(e);
                })
        },
        back() {
            this.get()
        }
    },
}
</script>
<style lang="less" scoped></style>
